<template>
    <div class="singer-intro">
      <div>
        <h2>简介</h2>
        <div>{{ desc }}</div>
      </div>
      <div>
        <h2>基本资料</h2>
        <div>
            <div v-for="(item, index) in basicItem" :key="index">
            <span>{{ item.key }}</span>
            <span style=  " white-space: pre-wrap ">{{ item.value }}</span>
            </div>
        </div>
      </div>
      <div v-for="(item,index) in otherItem" :key="index">
        <h2>{{ item.key }}</h2>
        <div style=" white-space: pre-wrap ">{{ item.value }}</div>
    </div>
    </div>
   
</template>
<script>
export default{
    props:["singerId"], //propertys
    data(){
     return{
        desc:"",
        basicItem:[],
        otherItem:[],
     }
    },
    created(){
        this.getData()
    },
    methods:{
        getData(){
          this.$request("get","/singer/desc" ,{
            singermid: this.singerId,
        }).then((res) => {
            console.log(res);
           this.desc = res.data.desc
           this.basicItem = res.data.basic.item
           this.otherItem = res.data.other.item
          });
        }
    }
}

</script>
<style scoped>
.singer-intro{
    text-align: left;
    padding: 0 1rem;
}
</style>